Grid Layout
Flexboxとの違い
基本
コンテナ 
グリッド全体を表す
display:grid; つける
インライン要素 display:inline-grid;
アイテム
グリッドのエリアに配置する要素
ライン
グリッドを分ける垂直および水平の線
グリッドの上下左右それぞれの両端にも存在
上あるいは左から1から
順に正の番号
下あるいは右から
-1から順に負の番号
トラック
グリッドの行および列
隣接する2本のラインの間
セル
隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小単位
エリア
一つあるいは複数のセルが結合してできるセルの集まり
エリアには名前を付けることができ、アイテムを配置可能
fr
メインエリアの幅指定にfrという単位
グリッドコンテナーの中を分割するサイズの指定に使える単位
配置の方法
ラインの番号で指定する
エリアに名前を付けて指定する
code:grid.html
<div id="container"> <!-- コンテナ -->
<div id="itemA">A</div> <!-- アイテム -->
<div id="itemB">B</div> <!-- アイテム -->
<div id="itemC">C</div> <!-- アイテム -->
</div>
code:grid.css
#container {
display: grid; /* グリッドレイアウト */
grid-template-rows: 100px 50px;
grid-template-columns: 150px 1fr;
}
参考
CSS Grid Layout入門対応ブラウザが出揃った新しいレイアウト仕様
CSS Grid Layout を極める!(基礎編)
CSS Grid Layout を極める!(場面別編)
https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892
CSS Grid Cheat Sheet Illustrated in 2021🎖️ - DEV Community 👩‍💻👨‍💻
絵でわかりやすい
CSS Layout Generator
GridのSandbox
https://www.nngroup.com/articles/using-grids-in-interface-designs/
デザインガイドライン